<script setup>
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
import Map from 'ol/Map'
import { watch } from 'vue'
import View from 'ol/View'
import TileLayer from 'ol/layer/Tile'
import XYZ from 'ol/source/XYZ'
import { fromLonLat } from 'ol/proj'
import ZoomToExtent from 'ol/control/ZoomToExtent'
import { FullScreen, ZoomSlider } from 'ol/control'
import OSM from 'ol/source/OSM'

const mapRef = ref({})
const mapInstance = ref({})
const layerVisible = ref(true)
const baiduLayer = new TileLayer({
  source: new OSM(),
})
const baiduView = new View({
  center: [0, 0],
  zoom: 1,
})
const gaodeLayer = new TileLayer({
  source: new XYZ({
    url: 'https://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}',
    crossOrigin: 'anonymous',
  }),
  zIndex:1,
  visible: true,
})
const weixingLayer = new TileLayer({
  source: new XYZ({
    url: 'https://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=6&x={x}&y={y}&z={z}',
    crossOrigin: 'anonymous',
  }),
  zIndex:1,
  visible: true,
})
const biaojiLayer = new TileLayer({
  source: new XYZ({
    url: 'https://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
    crossOrigin: 'anonymous',
  }),
  zIndex:1,
  visible: true,
})
const zoom = new ZoomToExtent({
  extent: fromLonLat([110, 20, 160, 50]),
})
const zoomslider = new ZoomSlider()
const full = new FullScreen()
const mapView = ref(
  new View({
    center: fromLonLat([113.267252, 23.137949]),
    zoom: 10,
    projection: 'EPSG:3857',
  }),
)

function qiehuan() {
  const layers = mapInstance.value.getLayers();
  const topZIndex = layers.getLength(); // 动态获取最高层级
  const currentZIndex = gaodeLayer.getZIndex();
  gaodeLayer.setZIndex(currentZIndex === topZIndex ? 1 : topZIndex);
}

function move() {
  const curCenter = mapView.value.getCenter()
  console.log(curCenter)
  mapView.value.animate({
    center: [curCenter[0], curCenter[1] + 100000],
    duration: 2000,
    zoom: 14,
  })
}

onMounted(() => {
  // 确保DOM元素已经渲染完成
  nextTick(() => {
    mapInstance.value = new Map({
      target: mapRef.value, // 绑定DOM元素
      layers: [gaodeLayer,weixingLayer,biaojiLayer],
      view: mapView.value,
    })
    mapInstance.value.addControl(zoom)
    mapInstance.value.addControl(zoomslider)
    mapInstance.value.addControl(full)
    
    // 强制更新地图尺寸
    setTimeout(() => {
      if (mapInstance.value) {
        mapInstance.value.updateSize();
      }
    }, 100);
  })
})

onBeforeUnmount(() => {
  if (mapInstance.value) {
    mapInstance.value.setTarget(undefined);
    mapInstance.value = null;
  }
})

watch(layerVisible, (newVal) => {
  gaodeLayer.setVisible(newVal) // ✅ 正确更新图层可见性
})
</script>

<template>
  <div id="map-container">
    <!-- 使用绝对定位的按钮 -->
    <div class="map-controls">
      <button @click="mapView.setCenter(fromLonLat([116.4074, 39.9042]))">去北京</button>
      <button @click="move">向上/下移动</button>
      <button @click="qiehuan">切换图层</button>
    </div>

    <!-- 地图容器 -->
    <div id="map" ref="mapRef"></div>
  </div>
</template>

<style scoped>
#map-container {
  position: relative; /* 创建定位上下文 */
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

.map-controls {
  position: absolute; /* 绝对定位 */
  top: 10px;
  right: 10px;
  z-index: 100; /* 确保在图层上方 */
}

#map {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
</style>
